<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { ComponentV2rayRouter, new_component_v2ray_router } from '@/models/components/v2ray/v2ray_router.ts'
import { dbus } from '@/dbus/dbus.ts'
import { invoke_proxy } from '@/functions/invoke.ts'
import { BackendResponse } from '@/runtime/response.ts'
import { BACKEND_CODE_OK } from '@/runtime/code.ts'
import { SelectOption } from 'naive-ui'

const emit = defineEmits(['saved'])
const state = reactive<{ show: boolean; router: ComponentV2rayRouter; restart: boolean; saving: boolean; domain_mode: string; ip_mode: string }>({ show: false, router: new_component_v2ray_router(), restart: true, saving: false, domain_mode: 'geosite', ip_mode: 'geoip' })
const domain_modes: SelectOption[] = [
    { label: '子域(推荐)', value: 'domain:' },
    { label: '完整域名', value: 'full:' },
    { label: '正则', value: 'regex:' },
    { label: 'GEOSITE(推荐)', value: 'geosite:' },
    { label: '扩展文件', value: 'ext:' },
]
const ip_modes: SelectOption[] = [
    { label: 'IP/CIDR', value: '' },
    { label: 'GEOIP(推荐)', value: 'geoip:' },
    { label: '扩展文件', value: 'ext:' },
]

onMounted(async () => {
    dbus.on('component:v2ray:add-router', show)
})

async function show(): Promise<void> {
    state.show = true

    state.router = new_component_v2ray_router()
    state.restart = true
    state.domain_mode = 'geosite:'
    state.ip_mode = 'geoip:'
}

async function save(): Promise<void> {
    const router = JSON.parse(JSON.stringify(state.router)) as ComponentV2rayRouter
    router.domain_or_ip_rule = ('domain' === state.router.type ? state.domain_mode : state.ip_mode) + router.domain_or_ip_rule

    state.saving = true
    const response = await invoke_proxy<BackendResponse<any>>('invoke_component_v2ray_add_router', { router: router, restart: state.restart })
    state.saving = false

    if (BACKEND_CODE_OK !== response.code) {
        window.Message.error(response.message)

        return
    }

    state.show = false
    window.Message.success('保存成功')

    emit('saved')
}
</script>

<template>
    <n-modal v-model:show="state.show" :mask-closable="false" class="modal" transform-origin="center">
        <n-card closable @close="state.show = false">
            <n-space :wrap="false" :wrap-item="false" vertical>
                <n-space :wrap="false" :wrap-item="false" align="center">
                    <div style="width: 200px">
                        <n-input-group>
                            <n-input-group-label size="small">类型</n-input-group-label>
                            <n-select
                                v-model:value="state.router.type"
                                :options="[
                                    { label: 'domain', value: 'domain' },
                                    { label: 'ip', value: 'ip' },
                                ]"
                                class="max-width"
                                placement="bottom"
                                size="small"
                            ></n-select>
                        </n-input-group>
                    </div>
                    <div class="max-flex-width">
                        <n-input-group>
                            <n-select v-if="'domain' === state.router.type" v-model:value="state.domain_mode" :options="domain_modes" size="small" style="width: 200px"></n-select>
                            <n-select v-if="'ip' === state.router.type" v-model:value="state.ip_mode" :options="ip_modes" size="small" style="width: 200px"></n-select>
                            <n-input v-model:value="state.router.domain_or_ip_rule" placeholder="请输入域名或IP地址" size="small" spellcheck="false"></n-input>
                        </n-input-group>
                    </div>
                    <div>
                        <n-checkbox v-model:checked="state.router.preset">是否预置(不被重置)</n-checkbox>
                    </div>
                    <div>
                        <n-checkbox v-model:checked="state.restart">重启V2ray服务</n-checkbox>
                    </div>
                </n-space>
                <n-space :wrap="false" :wrap-item="false" align="center" justify="center">
                    <n-button size="small" type="error" @click="state.show = false">取消</n-button>
                    <n-button :disabled="state.saving" size="small" type="info" @click="save">添加</n-button>
                </n-space>
            </n-space>
        </n-card>
    </n-modal>
</template>

<style lang="scss" scoped>
.modal {
    width: 80vw;
    height: 45vh;
}
</style>
